<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import * as echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			},
			autoResize: {
				type: Boolean,
				default: true
			},
			chartData: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				chart: null
			}
		},
		watch: {
			chartData: {
				deep: true,
				handler(val) {
					this.setOptions(val)
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons')
				this.setOptions(this.chartData)
			},
			setOptions(chartData) {
				this.chart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						top: 30,
						left: '2%',
						right: '2%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						name: chartData.xAxisName,
						nameTextStyle: {
							padding: [10, 0, 0, 0]
						},
						nameLocation: 'middle',
						data: chartData.xAxisData,
						axisTick: {
						  alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value',
						name: chartData.yAxisName,
						axisTick: {
							show: false
						}
					}],
					legend: {
						data: [chartData.legendName],
					},
					series: [{
						name: chartData.legendName,
						type: 'bar',
						stack: 'vistors',
						barWidth: '60%',
						data: chartData.seriesData,
						animationDuration
					}, 
					// {
					// 	name: 'pageB',
					// 	type: 'bar',
					// 	stack: 'vistors',
					// 	barWidth: '60%',
					// 	data: [80, 52, 200, 334, 390, 330, 220],
					// 	animationDuration
					// }, {
					// 	name: 'pageC',
					// 	type: 'bar',
					// 	stack: 'vistors',
					// 	barWidth: '60%',
					// 	data: [30, 52, 200, 334, 390, 330, 220],
					// 	animationDuration
					// },
					]
				})
			}
		}
	}
</script>